<template>
  <div class="promote-table-page">
    <el-table
      ref="multipleTable"
      :data="data"
      tooltip-effect="dark"
      :v-loading="isLoading"
      style="width: 100%"
      header-cell-class-name="header-cell-class-name"
      stripe
      border
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="id" label="编号" width="80" align="center">
        <template slot-scope="scope">
          <div>{{ pageSize*(currentPage-1)+ scope.$index+1 }}</div>
        </template>
      </el-table-column>
      <el-table-column v-if="userInfo.role==1||userInfo.role==3" prop="account" label="用户名" width="80" align="center">
      </el-table-column>
      <el-table-column prop="word" label="关键词" width="80" align="center">
      </el-table-column>
      <el-table-column prop="rank" label="排行" width="80" align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="站点名称"
        min-width="140"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="链接地址"
        min-width="140"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="keyStatus"
        label="关键词状态"
        width="120"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag :type="row.status+'' ">
            {{ status[row.exStatus+""] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="申请时间" align="center">
        <template slot-scope="{ row }">
          {{formatDate("YYYY-mm-dd HH:MM:SS",new Date(row.createTime))}}
        </template>
      </el-table-column>
      <el-table-column prop="auditTime" label="启动时间" align="center">
        <template slot-scope="{ row }" >
          {{(row.auditTime>0&&row.exStatus!=2)?formatDate("YYYY-mm-dd HH:MM:SS",new Date(row.auditTime)):"--"}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140" align="center">
        <template slot-scope="{ row }">
          <div style="display: inline-flex;flex-direction: column;justify-content: center;align-items: center;" v-if="userInfo.role==1||userInfo.role==3">
            <el-button
              type="text"
              size="small"
              icon="el-icon-view"
              @click="hkGotoWatch(row)"
            >查看
            </el-button>
            <el-button
              type="text"
              size="small"
              icon="el-icon-delete"
              @click="hkGotoDelete(row)"
            >删除
            </el-button
            >
            <el-button type="text" size="small" @click="hkGotoDisable(row)"
            >禁用
            </el-button>
          </div>
          <div v-else style="display: inline-flex;flex-direction: column;justify-content: center;align-items: center;">
            <el-button
              type="text"
              size="small"
              icon="el-icon-view"
              @click="hkGotoWatch(row)"
            >查看
            </el-button>
            <el-button
              v-if="row.exStatus!=3"
              type="text"
              size="small"
              icon="el-icon-delete"
              @click="hkGotoDelete(row)"
            >删除
            </el-button
            >
            <el-button v-if="row.exStatus==3" type="text" size="small" @click="hkGotoDisable(row)"
            >禁用
            </el-button>

          </div>

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {keyStatusList, tagStatusList} from "@/utils/tools";
  import {dateFormatCC} from "../../utils/tools"
  import {trace} from "../../utils/trace"
  import {mapGetters} from "vuex"

  export default {
    components: {},
    props: {
      activeName: String,
      pageSize: Number,
      currentPage: Number,
      data: {
        type: Array,
        default: function () {
          return [];
        },
      }
    },
    data() {
      return {
        isLoading: false,
        formatDate: dateFormatCC,
        multipleSelection: [],
        status: {
          1: "审核中", 2: "审核失败",3: " 审核成功",4: " 已禁用",5: " 已过期",
        }

      };
    },
    watch: {},
    computed: {
      ...mapGetters(["userInfo"])
    },
    filters: {
      filterTagStatus: val => {
        let info = tagStatusList[val] || "info";
        return info;
      },
      //    filtersTagText: val => {
      //    let items = keyStatusList.find(item => {
      //      return item.value == val;
      //    });
      //    return items.label || "未知";
      // }
    },
    methods: {
      hkGotoWatch(item) {
        item.showType = 3;
        item.status_text = this.status[item.exStatus];
        this.$bus.emit("showKey", item);
      },
      hkGotoEdit(item) {
        item.showType = 2;
        item.status_text = this.status[item.exStatus];
        this.$bus.emit("showKey", item);
      },
      hkGotoDisable(item) {     //禁用
        this.isLoading = true;
        let {id} = item;
        let mark = "禁用推广"
        this.$store.dispatch('promote/seoForbid', {id, mark}).then((data) => {
          trace("seoForbid-禁用推广-data", data);
          this.isLoading = false;
          this.$bus.emit("upList_promote")
        })
          .catch((err) => {
            this.isLoading = false;
            trace("禁用推广-seoForbid-err", err)
          })
      },
      hkGotoDelete(item) {      //删除
        this.isLoading = true;
        let {id} = item;
        let mark = "删除推广";
        this.$store.dispatch('promote/seoDel', {id, mark}).then((data) => {
          trace("seoDel-删除推广-data", data);
          this.isLoading = false;
          this.$bus.emit("upList_promote")
        })
          .catch((err) => {
            this.isLoading = false;
            trace("删除推广-seoDel-err", err)
          })
      },
    },
    created() {
    },
    mounted() {
      trace("prmote-table-data", this.pageSize, typeof this.currentPage,this.activeName,this.data)
    },
    beforeDestroy() {
    }
  };
</script>
<style lang="scss" scoped>

  ::v-deep .header-cell-class-name {
    background: #ecf0f3;
  }

  .promote-table-page {
    margin-top: 15px;
  }
</style>
